<template>
  <div class="app-container paper-index">
    <!-- 顶部banner区域 -->
    <div class="banner">
      <div class="banner-content">
        <h1 class="page-title">论文首页</h1>
        <p class="subtitle">范素怡 | 数据科学与大数据技术专业</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <el-row :gutter="30">
        <!-- 个人信息卡片 -->
        <el-col :xs="24" :sm="24" :md="8">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-user-circle header-icon"></i>
              <span class="header-title">个人信息</span>
            </div>
            <div class="profile-content">
              <div class="avatar">
                <div class="avatar-circle">
                  <img src="@/assets/logo/logo.png" alt="头像" class="avatar-img">
                </div>
                <div class="avatar-badge">
                  <el-badge is-dot :type="'success'" class="user-status"></el-badge>
                </div>
              </div>
              <div class="profile-info">
                <h3 class="user-name">范素怡</h3>
                <div class="info-item">
                  <i class="el-icon-s-claim"></i>
                  <span><strong>学号：</strong>116420220082</span>
                </div>
                <div class="info-item">
                  <i class="el-icon-collection-tag"></i>
                  <span><strong>专业：</strong>数据科学与大数据技术</span>
                </div>
                <div class="info-item">
                  <i class="el-icon-date"></i>
                  <span><strong>年级：</strong>2022级</span>
                </div>
                <div class="info-item">
                  <i class="el-icon-message"></i>
                  <span><strong>邮箱：</strong>fansuyi@example.com</span>
                </div>
                <div class="info-item">
                  <i class="el-icon-phone"></i>
                  <span><strong>联系方式：</strong>18800000000</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 论文信息卡片 -->
        <el-col :xs="24" :sm="24" :md="8">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-document header-icon"></i>
              <span class="header-title">论文信息</span>
            </div>
            <div class="paper-info">
              <h3 class="paper-title">{{ paperTitle }}</h3>
              <div class="info-item">
                <i class="el-icon-user"></i>
                <span><strong>指导教师：</strong>{{ advisor }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-folder"></i>
                <span><strong>论文类型：</strong>{{ paperType }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-calendar"></i>
                <span><strong>预计完成日期：</strong>{{ completionDate }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-flag"></i>
                <span><strong>论文状态：</strong>
                  <el-tag :type="statusType">{{ paperStatus }}</el-tag>
                </span>
              </div>
              <div class="progress-section">
                <strong>论文进度：</strong>
                <el-progress :percentage="progressPercentage" :stroke-width="8" :status="progressStatus"></el-progress>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 研究方向卡片 -->
        <el-col :xs="24" :sm="24" :md="8">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-data-line header-icon"></i>
              <span class="header-title">研究方向</span>
            </div>
            <div class="research-info">
              <div class="direction-item">
                <div class="direction-icon"><i class="el-icon-microchip"></i></div>
                <div class="direction-text">机器学习</div>
              </div>
              <div class="direction-item">
                <div class="direction-icon"><i class="el-icon-pie-chart"></i></div>
                <div class="direction-text">数据挖掘</div>
              </div>
              <div class="direction-item">
                <div class="direction-icon"><i class="el-icon-cloud"></i></div>
                <div class="direction-text">大数据分析</div>
              </div>
              <div class="direction-item">
                <div class="direction-icon"><i class="el-icon-shield"></i></div>
                <div class="direction-text">数据安全</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 论文摘要卡片 -->
      <el-row :gutter="30" style="margin-top: 30px;">
        <el-col :xs="24">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-notebook-2 header-icon"></i>
              <span class="header-title">论文摘要</span>
            </div>
            <div class="abstract-content">
              <p>{{ paperAbstract }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="30" style="margin-top: 30px;">
        <!-- 主要研究成果 -->
        <el-col :xs="24" :md="12">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-medal header-icon"></i>
              <span class="header-title">主要研究成果</span>
            </div>
            <div class="achievements">
              <ul>
                <li v-for="(achievement, index) in achievements" :key="index" class="achievement-item">
                  <div class="achievement-icon"><i class="el-icon-success"></i></div>
                  <div class="achievement-text">{{ achievement }}</div>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>

        <!-- 后续研究计划 -->
        <el-col :xs="24" :md="12">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-trend-charts header-icon"></i>
              <span class="header-title">后续研究计划</span>
            </div>
            <div class="future-plans">
              <div class="timeline">
                <div v-for="(plan, index) in futurePlans" :key="index" class="timeline-item">
                  <div class="timeline-dot"></div>
                  <div class="timeline-content">
                    <h4>{{ plan.title }}</h4>
                    <p>{{ plan.description }}</p>
                    <span class="timeline-date">{{ plan.date }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 技术栈卡片 -->
      <el-row :gutter="30" style="margin-top: 30px;">
        <el-col :xs="24">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-tools header-icon"></i>
              <span class="header-title">研究使用技术栈</span>
            </div>
            <div class="tech-stack">
              <el-tag v-for="(tech, index) in techStack" :key="index" size="large" effect="dark" class="tech-tag">{{ tech }}</el-tag>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FanSuYiPaperIndex',
  data() {
    return {
      // 论文信息
      paperTitle: '基于深度学习的异常检测算法研究与应用',
      advisor: '李教授',
      paperType: '学术论文',
      completionDate: '2025-06-30',
      paperStatus: '进行中',
      statusType: 'primary',
      progressPercentage: 75,
      progressStatus: 'primary',
      
      // 论文摘要
      paperAbstract: '本研究主要聚焦于深度学习在异常检测领域的应用，提出了一种基于改进的自编码器和注意力机制的异常检测算法。该算法通过多层次特征提取和自适应阈值调整，能够有效提高复杂数据环境下的异常检测准确率。研究中使用了多个公开数据集进行实验验证，并与现有的主流算法进行了对比分析。实验结果表明，所提出的算法在检测精度、召回率和F1值等关键指标上均有显著提升。本文的研究成果为网络安全、金融风控、工业生产等领域的异常检测应用提供了新的技术方案和理论支持。',
      
      // 主要研究成果
      achievements: [
        '提出了一种基于深度自编码器的异常检测改进算法',
        '设计了自适应阈值调整机制，提高了算法的鲁棒性',
        '在多个公开数据集上进行了实验验证，检测准确率达到92.5%',
        '完成了算法的原型系统开发和初步应用测试',
        '撰写研究论文1篇，已投稿至《计算机研究与发展》'
      ],
      
      // 后续研究计划
      futurePlans: [
        {
          title: '算法优化与性能提升',
          description: '进一步优化模型结构，提高算法在大规模数据上的处理效率',
          date: '2024.12 - 2025.02'
        },
        {
          title: '实际场景应用测试',
          description: '在真实业务场景中部署和测试算法，收集反馈并持续改进',
          date: '2025.03 - 2025.04'
        },
        {
          title: '论文完善与投稿',
          description: '根据实验结果完善论文内容，准备投稿至高水平学术期刊',
          date: '2025.05 - 2025.06'
        }
      ],
      
      // 技术栈
      techStack: [
        'Python', 'TensorFlow', 'PyTorch', 'Scikit-learn', 
        'Keras', 'Pandas', 'NumPy', 'Matplotlib',
        'Deep Learning', 'Autoencoder', 'Attention Mechanism',
        'Anomaly Detection', 'Data Mining'
      ]
    }
  },
  mounted() {
    // 页面加载完成后的初始化操作
  }
}
</script>

<style scoped>
/* 全局样式 */
.paper-index {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 40px;
}

/* Banner样式 */
.banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.banner-content {
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 18px;
  opacity: 0.9;
}

/* 内容容器 */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px 0;
}

/* 卡片通用样式 */
.info-card {
  border-radius: 8px;
  border: 1px solid #ebeef5;
  background: white;
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fafafa;
  border-radius: 8px 8px 0 0;
}

.header-icon {
  font-size: 18px;
  color: #1890ff;
  margin-right: 8px;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 个人信息卡片样式 */
.profile-content {
  padding: 25px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.avatar {
  position: relative;
  margin-bottom: 20px;
}

.avatar-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-badge {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(25%, -25%);
}

.user-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

.info-item i {
  color: #1890ff;
  margin-right: 8px;
  font-size: 16px;
}

/* 论文信息卡片样式 */
.paper-info {
  padding: 25px;
}

.paper-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
  line-height: 1.5;
}

.progress-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.progress-section strong {
  display: block;
  margin-bottom: 10px;
  color: #333;
}

/* 研究方向卡片样式 */
.research-info {
  padding: 25px;
}

.direction-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.direction-item:hover {
  background-color: #e6f7ff;
  transform: translateX(5px);
}

.direction-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 16px;
}

.direction-text {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 论文摘要卡片样式 */
.abstract-content {
  padding: 25px;
}

.abstract-content p {
  color: #555;
  line-height: 1.8;
  text-indent: 2em;
  font-size: 15px;
  margin: 0;
}

/* 研究成果卡片样式 */
.achievements {
  padding: 25px;
}

.achievements ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.achievement-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-left: 10px;
  border-left: 3px solid #e8e8e8;
  transition: all 0.3s ease;
}

.achievement-item:hover {
  border-left-color: #1890ff;
  transform: translateX(5px);
}

.achievement-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f0f9ff;
  color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

.achievement-text {
  color: #555;
  line-height: 1.6;
  font-size: 14px;
}

/* 后续研究计划卡片样式 */
.future-plans {
  padding: 25px;
}

.timeline {
  position: relative;
  padding-left: 20px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e8e8e8;
}

.timeline-item {
  position: relative;
  margin-bottom: 20px;
  padding-left: 20px;
}

.timeline-dot {
  position: absolute;
  left: -26px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #1890ff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #1890ff;
}

.timeline-content h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.timeline-content p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.timeline-date {
  font-size: 12px;
  color: #999;
  background-color: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
}

/* 技术栈卡片样式 */
.tech-stack {
  padding: 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tech-tag {
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tech-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 32px;
  }
  
  .subtitle {
    font-size: 16px;
  }
  
  .content-wrapper {
    padding: 20px 15px 0;
  }
  
  .profile-content,
  .paper-info,
  .research-info,
  .abstract-content,
  .achievements,
  .future-plans,
  .tech-stack {
    padding: 20px;
  }
}
</style>